<!--
  @author:  long
  @date:    2023/3/7
  @file:    客户联系人
  @require:
-->
<template>
  <div>
    <div class="flex items-center justify-between">
      <!--      <div class="text-gray-600 text-sm">-->
      <!--        <i class="i-bi-bookmarks-fill"></i>-->
      <!--        下级客户-->
      <!--      </div>-->
      <TitleName title="下级客户" icon="i-carbon-bookmark-filled"></TitleName>
      <div>
        <el-button type="primary" icon="UploadFilled" plain>导出</el-button>
      </div>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        header-align="center"
        align="center"
        prop="customerName"
        label="客户名称"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="customerType"
        label="客户类型"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="status"
        label="客户状态"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="mainContactName"
        label="首联系人"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="mainContactPhone"
        label="手机号码"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="userName"
        label="客户归属"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="remark"
        label="备注"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="LowerLevelCustomer">
import { getCurrentInstance } from 'vue'
import { getDetailRefUserlist } from '@/api/customerManage/customerList'
const router = useRouter()
const { proxy } = getCurrentInstance()

// 字典 具体查看根目录DICT.md文件
const { customer_status } = proxy.useDict('customer_status')

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  selectionData: []
})
const { queryParams, tableData, total, selectionData } = toRefs(data)

/**
 * 获取列表数据
 */
function getList() {
  queryParams.value.id = router.currentRoute.value.query.customerId

  getDetailRefUserlist(queryParams.value).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
  })
}
getList()

/**
 * 表格多选
 */
function handleSelectionChange(data) {
  selectionData.value = data
  console.info(selectionData.value)
}

/**
 * 删除方法
 */
function handleDel() {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要删除的数据')
    return
  }
  proxy
    .$confirm('确认删除选中记录吗？', '提示', {
      type: 'warning'
    })
    .then(() => {})
}
</script>

<style scoped lang="scss"></style>
